<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let data = [
        { value: 3048, name: '高圆圆' },
        { value: 900, name: '迪丽热巴' },
        { value: 2048, name: '杨超越' },
        { value: 1048, name: '刘诗诗' },
        { value: 6048, name: '刘亦菲' },
    ]
    // 用的16进制颜色；方便与 外层透明色的修改；
    let colors = ['#98EECC', '#FF78C4', '#E4A5FF', '#30A2FF', '#FC4F00'];
    let legends = [];
    data.map((item, k) => {
        legends.push(item.name);
        item['itemStyle'] = { color: colors[k] }
    })
    const computedDataGap = (dataParam, isN2 = false) => {
        let newData = [];
        let gapItem = {
            value: 40,  //间隙值；我这里没计算；可以做一个函数根据总数和需要的value计算添加
            name: null,
            itemStyle: {
                opacity: 0
            },
            tooltip: {  //隐藏这个的鼠标悬浮
                show: false,
            },
        }
        let showLen = dataParam.filter((v) => v.value && v.value > 0);
        if (showLen.length <= 1) {
            return dataParam;
        }
        dataParam.map((v, k) => {
            let v_ = v;
            // 用于判断是否是 外城pie的item
            if (isN2) {
                // 计算传入数据的value总和 用于计算2PI对于总数的均值
                let count = dataParam.map((v) => v.value).reduce((a, b) => a + b);
                let pi = Math.PI * 2 / count;

                // 例如leged2 开始的角度需要加上legend1的结束的位置则加上当前的value
                let beforeCount = 0;
                // for 循环i < k 不包含map循环的item
                for (let i = 0; i < k; i++) {
                    beforeCount += dataParam[i].value;
                }
                // 结束的
                let afterCount = beforeCount + v.value;

                let endAngle = pi * beforeCount;
                let startAngle = pi * afterCount;
                let angle = (endAngle + startAngle) / 2;
                angle = angle * 180 / Math.PI;
                v_ = {
                    ...v,
                    itemStyle: {
                        color: v.itemStyle.color + '7a'
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: "#000",
                        rotate: -angle,
                        fontSize: 16,
                        color: '#333'
                    }
                }
            }
            newData.push(v_)
            if (v.value) {
                newData.push(gapItem)
            }
        })
        return newData;
    }
    let n = computedDataGap(data);
    let n2 = computedDataGap(data, true);
    // 最终数据处理结果在这；一眼懂
    console.log(n, n2);

    let option = {
        backgroundColor: "#fff",
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',
            right: '20%',
            data: legends,
            orient:'vertical'
        },
        color: colors,
        series: [
            {
                name: '对ta的爱',
                type: 'pie',
                radius: ['40%', '50%'],
                center:['40%','50%'],
                // 避免label重叠
                avoidLabelOverlap: false,
                // 占位样式
                emptyCircleStyle: {
                    color: 'rgba(255,255,255,0)'
                },
                label: { show: false },
                data: n,
                tooltip: { show: false },
                emphasis: {
                    disabled: true
                }
            },
            {
                name: '对ta的爱',
                type: 'pie',
                radius: ['50%', '80%'],
                center:['40%','50%'],
                // 避免label重叠
                avoidLabelOverlap: false,
                // 占位样式
                emptyCircleStyle: {
                    color: 'rgba(255,255,255,0)'
                },
                labelLine: {
                    show: false
                },
                label: {  //这里加上用于剩余最后一个占满时的旋转； 在data的label没有时则用这个；且data内的优先级高于此
                    show: true,
                    position: 'inside',
                    color: "#000",
                    rotate: 0
                },
                data: n2
            }
        ]
    };

    myChart.on('legendselectchanged', function (lparam) {
        let selects = lparam.selected;
        let newDataFilter = [];
        data.filter((item) => {
            if (selects[item.name]) {
                newDataFilter.push(item);
            } else {
                let clone = {
                    ...item,
                    value: 0
                }
                newDataFilter.push(clone)
            }
        })
        let nn = computedDataGap(newDataFilter);
        let nn2 = computedDataGap(newDataFilter, true);
        myChart.setOption({
            series: [
                {
                    data: nn
                },
                {
                    data: nn2
                }
            ]
        })
        console.log(lparam)
    })
    myChart.setOption(option)
})
</script>